<template>
  <div class="page channel">
    <div class="pageHeader">
      <h1>
        <img src="~assets/img/logo.png" alt="" class="logo">
      </h1>
      <div class="back" @click="goBack">
        <img src="~assets/img/back.png" class="back-img">
        <span class="back-txt">
          返回
        </span>
      </div>
    </div>
    <div class="content">
      <div class="content-top">
        <div
          v-for="(item, index) in channelTabs"
          :key="item.column_id"
          class="channel-tab"
          :class="{'active': index === active}"
          @click="tabSwitch(item, index)"
        >
          <span>
            {{item.name}}
          </span>
          <i></i>
        </div>
      </div>
      <div class="content-bottom">
        <div class="radio-wrapper">
          <div v-for="item in sorts" :key="item.key" class="radio-item" :class="{'active': item.key === sort}" @click="radioChange(item)">
            <i></i>
            <span>{{item.value}}</span>
          </div>
        </div>
        <div class="list">
          <img v-show="curPage > 1" src="~assets/img/left_arrow.png" class="banner-arrow left" @click="pageJump(-1)">
          <img v-show="curPage < (total/8)" src="~assets/img/right_arrow.png" class="banner-arrow right" @click="pageJump(1)">
          <div v-if="platformList.length" key="has" class="scrollBar">
            <div
              v-for="(item, index) in platformList"
              :key="index"
              class="scroll-item"
              @click="toPlay(item)"
            >
              <img :src="item.cover_url" class="scroll-img">
              <div class="scroll-txt">
                {{item.name}}
              </div>
            </div>
          </div>
          <!-- <div class="none" key="no">
            暂无数据！
          </div> -->
          
        </div>
        <div class="pagers">
          第{{curPage}}页
        </div>
      </div>
    </div>

    <el-dialog
      v-if="dialogVisible"
      title=""
      class="frameDialog"
      :fullscreen="true"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <iframe :src="iframeSrc" frameborder="0" class="iFrame"></iframe>
    </el-dialog>
  </div>
</template>
<script>
import qs from "qs";
import { mapState } from 'vuex'
import * as api from '@/api'
import { sorts } from '@/consts/codesMap'
export default {
  data() {
    return {
      active: 0,
      tab: {
        column_id: "",
        name: "首页"
      },
      sorts,
      sort: '0',
      limit: 8,
      total: 0,
      curPage: 1,
      channelTabs: [],
      platformList: [],
      iframeSrc: '',
      dialogVisible: false
    }
  },
  computed: {
    ...mapState(['channelObj'])
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },

    tabSwitch(item, index) {
      this.tab = item
      this.active = index
      this.curPage = 1
      this.platformColumn()
    },

    radioChange(item) {
      this.sort = item.key
      this.platformColumn()
    },

    toPlay(item) {
      if (item.content_type == 0) {
        this.$store.commit('setState', {
          name: 'playObj',
          value: item
        })
        this.$router.push({
          path: '/play',
          query: this.$route.query
        })
      } else if (item.content_type == 1) {
        this.iframeSrc = item.content
        this.dialogVisible = true
      } else {
        this.$message.warning('敬请期待！')
      }
      
    },

    parseStr() {
      let str = window.location.hash
      let obj = qs.parse(str)
      return obj
    },

    pageJump(n) {
      this.curPage += n
      this.platformColumn()
    },

    handleClose() {
      this.dialogVisible = false
      this.iframeSrc = ''
    },

    // 8.4 获取栏目列表
    async platformColumnList() {
      let obj = this.parseStr()
      const { code, data } = await api.platform(this).platformColumnList({
        channel_id: this.channelObj.channel_id,
        app: obj.app_name
      })
      if (code === 0) {
        this.channelTabs = data

        this.channelTabs.unshift({
          column_id: "",
          name: "首页"
        })
        
        this.active = this.channelObj.home == 1 ? 1 : 0
      }
    },
    
    // 8.5 获取栏目下资源
    async platformColumn() {
      let obj = this.parseStr()
      let p = {
        org_id: obj.org_id,
        offset: (this.curPage - 1) * this.limit,
        limit: this.limit,
        channel_id: this.channelObj.channel_id,
        sort: this.sort,
        order: 0,
        app: obj.app_name,
        column_id: this.tab.column_id
      }
      const { code, data, total } = await api.platform(this).platformColumn(p)
      if (code === 0) {
        this.platformList = data
        this.total = total
      }
    },

  },
  created () {
    this.platformColumnList()
    this.platformColumn()
  },
}
</script>
<style lang="stylus">
.channel {
  padding:0 getPx(40) getPx(40)
  .content {
    position: absolute
    top: getPx(80)
    right: getPx(40)
    left: getPx(40)
    bottom: getPx(40)
    .content-top {
      height: getPx(200);
      border-bottom: 1px solid #fff;
      overflow-x: auto;
      flexMiddle(flex-start);  
    }
    .channel-tab {
      min-width: getPx(220);
      max-width: getPx(220);
      flex: 1;
      padding: getPx(10) 0;
      color: $primary;
      margin-right: getPx(20);
      cursor: pointer;
      font-size: getPx(24);
      flexMiddle(center);
      &.active {
        color: #000;
        background: #fff;
        border-radius: getPx(8);
        i {
          background: #29fd2e;
        }  
      }
      i {
        display: inline-block;
        width: getPx(14);
        height: getPx(14);
        background: #fff;
        border-radius: 50%;
        margin-left: getPx(10);  
      }
    }
    .content-bottom {
      height: getPx(600);
      .radio-wrapper {
        height: getPx(100);
        flexMiddle(flex-start);
        .radio-item {
          cursor: pointer;
          margin-right: getPx(20);
          font-size: getPx(24);
          flexMiddle(center);
          i {
            display: inline-block;
            width: getPx(20);
            height: getPx(20);
            border-radius: 50%;
            background: #fff;
            margin-right: getPx(20); 
          }
          &.active {
            i {
              background: #29fd2e;
            }
          }
        }  
      } 
      .list {
        height: getPx(800);
        padding: 0 getPx(80);
        position: relative;
        .banner-arrow {
          cursor: pointer;
          width: getPx(53);
          height: getPx(86);
          position: absolute;
          top: 25%;
          &.left {
            left: 0;  
          }  
          &.right {
            right: 0;  
          }
        }
        .scrollBar {
          height: getPx(500);
          overflow-y:hidden
          overflow-x:scroll
        }
        .scroll-item {
          width: getPx(400);
          height: getPx(230);
          margin: 0 getPx(20) getPx(20) 0;
          cursor: pointer;
          float: left;
          .scroll-img {
            width: 100%;
            height: getPx(210);
            display: block;
          }
          .scroll-txt {
            font-size: getPx(20);
            margin-top: getPx(10);  
          }
        }
        
      }
    }

    .pagers {
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      bottom: getPx(20); 
    }
  }
}
</style>